<template>
  <div class="stop-words">
    <div class="words-wrap">
      <div class="search">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item >
                <el-input size="small" v-model="searchInput" placeholder="请输入内容" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="handleSearch()">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>
      <el-button class="addButton" size="mini" icon="el-icon-document" @click="add">
        新增
      </el-button>
      <el-table
        v-loading="listLoading"
        :data="tableList"
        border
        class="table"
      >
        <el-table-column
          label="ID"
          prop="id"
          width="50">
        </el-table-column>
        <el-table-column
          label="词语"
          prop="keyword"
          width="300">
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="createDate"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getWords"
        />

      </div>
    </div>

  </div>
</template>

<script>
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {getStopUSingData, deleteWords, addWords} from '@/api/stop-using'

  export default {
    name: 'Stop-words',
    components: {Pagination},
    data() {
      return {
        tableList: null,
        searchInput: '',
        listLoading: false,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        },
      }
    },
    created() {
      this.getWords();
    },
    methods: {
      getWords() {
        this.listLoading = true;
        let param = {
          pageSize: this.listQuery.limit,
          pageNum: this.listQuery.page,
          key: this.searchInput,
        };
        getStopUSingData(param).then(res => {
          this.tableList = res.result.list;
          this.total = res.result.total;
          this.listLoading = false;
        }).catch(error => {
          this.listLoading = false;
        });
      },
      handleSearch() {
        this.pageNum = 1;
        this.getWords();
      },
      add() {
        this.$prompt('请输入停用词', '新增停用词', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S+/,
          inputErrorMessage: '停用词不可为空'
        }).then(({value}) => {
          this.listLoading = false;

          addWords({keyword: value}).then(res => {
            this.getWords();
            this.listLoading = false;
            this.$message({
              type: 'success',
              message: '停用词添加成功'
            });
          }).catch(error => {
            this.listLoading = false;

          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      deleteClick(id) {
        this.$confirm( 
            '请确认删除该停用词', { onfirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
        }).then(() => {
            this.listLoading = true;
            deleteWords({id: id}).then(res => {
              this.getWords();
              this.$message({
                message: "删除成功",
                type: "success"
              });
            }).catch(error => {
              this.listLoading = false;
            })
        }).catch(() => {})
      }
    }
  }
</script>
<style lang="less" scoped>
  .stop-words{
    padding-top: 36px;

    .words-wrap{
      width: 80%;
      margin: auto;
    }
  }
  .search {
    width: 300px;
    display: flex;
    margin-bottom: 24px;
  }

  .addButton {
    margin-bottom: 24px;

  }
</style>
